<template>
<div>
  <div class="container">
    <div class="row clearfix">
      <div class="col-md-4 column">
      </div>
      <div class="col-md-4 column">

          <div class="form-group">
            <label for="exampleInputEmail1">用户名</label><input type="text" class="form-control" id="exampleInputEmail1" v-model="username" />
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" v-model="password"/>
          </div>
          <div class="checkbox">
          </div> <button type="submit" class="btn btn-default" v-on:click="login">查看推荐订单</button>

        <br><br><br><br>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div v-for="o in productList" :key="o" class="text item">
            {{ o.productID}}
            {{ o.product_name}}
            {{ o.price}}
            {{ o.volume}}
            {{ o.shopp_name}}
            {{ o.location}}
            {{ o.evaluate}}
            {{ o.collect}}


          </div>
        </el-card>

      </div>
      <div class="col-md-4 column">
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Login",
  methods:{
    login(){
      this.$ajax.get("http://localhost:8083/user/login",{
        params:{
          username: this.username,
          password: this.password
        }
      }).then(response=>{
          this.productList = response.data
      })

    }
  },
  data() {
    return{
      username:"",
      password:"",
      productList:""
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>